import { Button, DatePicker, message, Descriptions } from 'antd';
import React, { useState, useRef } from 'react';
import { history } from 'umi';
import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table';
import { sendList, batchRecordlist } from './service'
// 自定义组件
import Batch from './Batch';
import Single from './Single';

const TableList: React.FC<{}> = () => {
  const { activityId, paperId } = history.location.query || {}
  const actionRef = useRef<ActionType>();
  const batchActionRef = useRef<ActionType>();
  const [modalVisible, setModalVisible] = useState<boolean>(false);
  const [modalType, setModalType] = useState<'Batch' | 'Single' | ''>('');
  // const [paperName, setName] = useState('');
  const [paperName, setPaperName] = useState();
  const [paperLevel, setPaperLevel] = useState();
  const [startTimeStr, setStartTimeStr] = useState();
  const onReload = () => {
    // const fetchStatus = async () => {
    //   const res = await getListStatusCount();
    //   setStatusList(res.result);
    // };
    // fetchStatus();
    if (actionRef.current) {
      actionRef.current.reload();
    }
    if (batchActionRef.current) {
      batchActionRef.current.reload();
    }
  };
  const batchColumns: ProColumns<any>[] = [
    {
      title: '课程名称',
      dataIndex: 'name',
    },
    {
      title: '班级名称',
      dataIndex: 'className',
    },
    {
      title: '学员标签',
      dataIndex: 'studentTag',
    },
    {
      title: '操作人',
      dataIndex: 'sendName',
    },
    {
      title: '生效时间',
      dataIndex: 'validTime',
    },


  ];
  const columns: ProColumns<any>[] = [
    {
      title: '用户名',
      dataIndex: 'name',
    },
    {
      title: '操作人',
      dataIndex: 'sendName',
    },
    {
      title: '生效时间',
      dataIndex: 'validTime',
    },

  ];

  return (
    <>
    <Descriptions style={{backgroundColor: '#fff',padding:'20px 20px 0',marginBottom:'10px'}}>
        <Descriptions.Item label="试卷名称">{paperName}</Descriptions.Item>
        <Descriptions.Item label="难度">{paperLevel}</Descriptions.Item>
        <Descriptions.Item label="开始时间">{startTimeStr}</Descriptions.Item>
    </Descriptions>
    <ProTable<any>
        headerTitle='批量发放'
        actionRef={batchActionRef}
        rowKey="uuid"
        columns={batchColumns}
        request={async (params) => {
          const msg = await batchRecordlist({
            paperId
          });
         
          setPaperName(msg.result.paperName)
          setPaperLevel(msg.result.level)
          setStartTimeStr(msg.result.startTimeStr)
          return {
            data: msg.result.batchRecords,
            success: true,
            // total: msg.result.total,
          };
        }}
        search={false}
        toolBarRender={() => [
          <Button
          type="primary"
          onClick={() => {
            setModalVisible(true);
            setModalType('Single');
          }}
        >
          单独发放
        </Button>,
          <Button
            type="primary"
            onClick={() => {
              setModalVisible(true);
              setModalType('Batch');
            }}
          >
            批量发放
          </Button>,
        ]}
        options={false}
      />
      <ProTable<any>
        headerTitle='单独发放'
        actionRef={actionRef}
        rowKey="uuid"
        columns={columns}
        request={async (params) => {
          const msg = await sendList({
            paperId,
            pageNo:params.current,
            pageSize:params.pageSize
          });
          return {
            data: msg.result.personRecords,
            success: true,
            total: msg.result.total,
          };
        }}
        search={false}
        options={false}
      />
      <Batch
        onCancel={() => setModalVisible(false)}
        modalVisible={modalVisible && modalType == 'Batch'}
        paperId={paperId}
        activityId={activityId}
        onReload={onReload}
      />
      <Single
        onCancel={() => setModalVisible(false)}
        modalVisible={modalVisible && modalType == 'Single'}
        paperId={paperId}
        activityId={activityId}
        onReload={onReload}
      />
    </>
  );
};

export default TableList;
